<template>
  <div class="detailpage">
    <div class="Carousel">
      <swiper :show-dots="false" auto loop :interval=5000 height="128vw" v-model="i">
        <swiper-item v-for="(item,index) in DetailPage.imgs" :key="index">
          <img :src="item" alt="">
        </swiper-item>

      </swiper>
      <span class="pagination">{{i+1}}/{{IDlength}}</span>

      <div class="backAndshare">
        <x-icon class="backto" type="ios-arrow-back" size="30" @click="backTo()"></x-icon>
        <i class="fa fa-share-alt WXshare fa-lg"></i>
      </div>

    </div>
    <div class="merchandisetitle">
      <p v-text="DetailPage.title"></p>
      <span>{{DetailPage.price | money}}</span>&emsp;<span><s>{{DetailPage.tag_price |money}}</s></span>
    </div>
    <div class="merchanttitle">
      <p>在售商家</p>
      <img :src="sellerInfo.head" alt="">
      <span v-text="sellerInfo.name"></span>
      <br>
      <span><i class="fa fa-headphones"></i>联系商家</span><span><i class="fa fa-archive"></i>进入店铺</span>
    </div>
    <div id="Image-details" v-html="DetailPage.detail">
    </div>

  </div>
</template>

<script>
  export default {
    name: "detailpage",
    data() {
      return {
        ID: null,
        DetailPage: [],
        i: 0,
        IDlength: 0,
        sellerInfo: []
      }
    },
    created() {
      this.ID = this.$router.currentRoute.query.id
      this.acquireID()
      // this.shangjiaxinxi()
    },
    methods: {
      backTo: function () {
        this.$router.push({path: '/homeSearch'})
      },
      acquireID: function () {
        var _this = this
        this.$http.get('/wants/product/' + this.ID + '/').then(function (value) {
          _this.DetailPage = value.body
          _this.IDlength = value.body.imgs.length
          _this.sellerInfo = value.body.provider
        })
      },
      // shangjiaxinxi:function () {
      //   this.$http.get('/wants/repositories/4518517/commits?per_page=10&callback=ghcommits._jsonpcb&_=1538122331000')
      //     .then(function (value) {
      //       console.log(value)
      //     })
      // }
    },
    mounted(){
      window.onload = function() {
        var oDiv = document.getElementsByClassName('backAndshare')[0];
        var divT = oDiv.offsetTop;
        //console.log(divT);
        window.onscroll = function() {
          // 获取当前页面的滚动条纵坐标位置 （依次为火狐谷歌、safari、IE678）
          var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
          if (scrollT >= divT) {
            if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
              // 兼容IE6代码
              oDiv.style.position = 'absolute';
              oDiv.style.top = scrollT + 'px';
              oDiv.style.left = 0 + 'px';
            } else {
              // 正常浏览器代码
              oDiv.style.position = 'fixed';
              oDiv.style.top = 0;
              oDiv.style.left = 0;
            }
          } else
            oDiv.style.position = '';
        }
      }
    },
    beforeRouteLeave(to, from, next) {
      if (to.path == "/homeSearch") {
        to.meta.keepAlive = true;
      } else {
        to.meta.keepAlive = false;
      }
      next();
    }

  }
</script>

<style scoped>
  .detailpage {
    width: 100vw;
    min-height: 100vh;
    position: absolute;
    top: 0;
    z-index: 501;
    background: white;
  }

  .Carousel {
    position: relative;
  }

  .pagination {
    position: absolute;
    bottom: 4vw;
    right: 4vw;
    color: gray;
  }

  .backAndshare{
    position: absolute;
    top:0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 2vw;
  }

  .backto {
    display: inline-block;
    width: 10vw;
    height: 10vw;
  }

  .WXshare {
    display: inline-block;
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
  }

  .vux-swiper-item > img {
    width: 96vw;
    /*height: ;*/
  }

  .merchandisetitle {
    padding: 0 5vw;
    text-align: left;
  }

  .merchandisetitle > p {
    font-size: 18px;
    margin: 2vw 0;
  }

  .merchandisetitle > span:nth-child(2) {
    color: red;
    font-size: 18px;
  }

  .merchanttitle {
    padding: 0 5vw;
    text-align: left;
  }

  .merchanttitle > p {
    font-size: 14px;
    color: gray;
    margin: 4vw 0;
  }

  .merchanttitle > img {
    display: inline-block;
    width: 8vw;
    height: 8vw;
    vertical-align: middle;
    margin-right: 3vw;
  }

  .merchanttitle > span:nth-child(3) {
    display: inline-block;
    line-height: 8vw;
    vertical-align: middle;
    font-size: 15px;
  }

  .merchanttitle > span:nth-child(5),span:nth-child(6) {
    display: inline-block;
    width: 40vw;
    background: white;
    border: 1px solid gray;
    margin:3vw 10vw 3vw 0;
    padding: 2vw 0;
    text-align: center;
  }
  .merchanttitle>span:nth-child(6){
    margin-right: 0;
  }
</style>
